<template>
    <div class="luck-box"  style="position: relative">
        <div>
            <div class="alipay-return">
                <i @click="luckDrawreturn()" class=" plipayticon iconfont icon-jiantou"></i>
                <span>抽奖</span>
            </div>
            <!-- <div class="luck-title" v-show="firstLuckdrawStatus == 0">
               <div class="luck-title-title" >
                  <img src="../../assets/img/titlle.png">
                   <span>{{luckdraw_Total_num}}个用户已参与</span>
                   <p>开奖时间 {{startTime}}</p>
                   <div class="luch-yuan">
                       <span>{{balance}}</span>
                       <div style="float: right">
                           <div class="luch-yuan-right">元</div>
                           <div class="luch-yuan-text">现金<br>红包</div>
                       </div>
                   </div>
                   <div class="grade-ruler" @click="drawruler()">
                        抽将规则
                   </div>
                   <div  class="grade-ruler-content">
                        现金红包奖品，将在开奖后的第二天8点整点发放到中奖者的钱包账户中。
                   </div>
               </div>
                <div class="luch-stick">
                    <div class="luck-stick-btn" @click="graddraw()">
                         <p>参与抽奖<span>({{joinIntegral}}积分)</span></p>
                         <h5>首次免积分</h5>
                    </div>
                </div>
            </div> -->
            <div class="luck-title" v-show="firstLuckdrawStatus == 1 || firstLuckdrawStatus == 0">
                <div class="luck-title-title" >
                    <img src="../../assets/img/titlle.png">
                    <span>{{luckdraw_Total_num}}个用户已参与</span>
                    <p>开奖时间 {{startTime}}</p>
                    <!-- <p style="font-size:15px;">开奖倒计时
                        <van-count-down :time="time" style=" display: inline-block">
                            <template v-slot="timeData">
                                <span class="block">{{ timeData.hours }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.minutes }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.seconds }}</span>
                            </template>
                        </van-count-down>
                    </p> -->
                    <div class="luch-yuan">
                        <span>{{balance}}</span>
                        <div style="float: right">
                            <div class="luch-yuan-right">元</div>
                            <div class="luch-yuan-text">现金<br>红包</div>
                        </div>
                    </div>
                    <div class="grade-ruler" @click="drawruler()">
                        抽将规则
                    </div>
                    <div  class="grade-ruler-content">
                        现金红包奖品，将在开奖后的第二天8点整点发放到中奖者的钱包账户中。
                    </div>
                </div>
                <div class="luch-stick">
                   <div style="width: 304px; margin: auto">
                    <div class="luck-stick-left" @click="newInvested()">
                        <p>查看广告抽奖</p>
                        <h4>({{look_avd_num}}/5)</h4>
                    </div>
                    <div class="luck-stick-right" @click="graddraw()">
                        <!-- <p>参与抽奖<span>({{joinIntegral}}积分)</span></p>   -->
                        <p>参与抽奖</p>
                        <h4>({{joinIntegral}}积分)</h4>
                    </div>
                   </div>
                </div>
            </div>
        </div>
        <!-- <div v-show="luckState == 1">
            <div class="luck-title" >
                <div class="luck-title-title" >
                    <img src="../../assets/img/titlle.png">
                    <span>3123个用户已参与</span>
                    <p>下次抽奖开放时间：2020/2/22 20:00</p>
                    <div class="luch-yuan">
                        <span>188</span>
                        <div style="float: right">
                            <div class="luch-yuan-right">元</div>
                            <div class="luch-yuan-text">现金<br>红包</div>
                        </div>
                    </div>
                    <div class="looklook">
                        中奖用户: 1888*****88
                    </div>
                    <div class="grade-ruler" @click="drawruler()">
                        抽将规则
                    </div>
                    <div  class="grade-ruler-content">
                        以下文案为参考不是最终效果： 邀请的用户数量越多，用户等级越高，营业时间越多，则额外加成越高，具体规则如下：
                        <br><br> 【1】用户每直邀一个新用户，可以获得SQT收益的额外加成，基于新用户的会员等级，一级二级三级会员，依次可获得1% 2% 3%的加成比例。
                        <br><br>【2】如果被邀请用户当前处于营业状态，则额外加成可基于会员等级，对应提高至 4% 8% 12%
                        <br><br>【3】用户每直邀一个新用户，可以获得SQT收益的额外加成，基于新用户的会员等级，一级二级三级会员，依次可获得1% 2% 3%的加成比例。
                    </div>
                </div>
    
            </div>
        </div> -->
    </div>
</template>

<script>
import { Toast } from 'vant'
    export default {
        name: "luckDraw",
        data(){
            return{
                time: 30 * 60 * 60 * 1000,
               everdatachild:true,
               userId:'',
               firstLuckdrawStatus:0,
               gameType:1,
               luckdraw_Total_num:0,
               balance:0,
               name:'',
               rewardContent:'',
               startTime:'',
               joinIntegral:'',
               my_luckdraw_Total_num:0,
               look_avd_num:0,
               luckState:0,
               luckdrawId:''
            }
        },
        mounted() {
            this.userId = localStorage.getItem('user_id');
            this.gameType = this.$route.params.type;
            this.initData();
        },
        methods:{
            initData(){
                this.$http.post(this.utils.config+"/netmall/app/person/api/getPersonCenterData?user_id="+this.userId).then((data) => {
                    this.firstLuckdrawStatus = data.data.result.tbMnUser.firstLuckdrawStatus;
                })
                this.$http.post(this.utils.config+"/netmall/app/gamecenter/api/getMyLuckDrawList?user_id="+this.userId+"&luckdraw_type="+this.gameType).then((data) => {
                        if(data.data.success){
                            this.my_luckdraw_Total_num = data.data.result.my_luckdraw_Total_num;
                            this.look_avd_num = data.data.result.look_avd_num;
                            this.luckdraw_Total_num = data.data.result.luckdraw_Total_num;
                            
                            this.luckdrawId = data.data.result.tbUserLuckdraw.id;
                            this.luckState = data.data.result.tbUserLuckdraw.state;
                            this.balance = data.data.result.tbUserLuckdraw.balance;
                            this.name = data.data.result.tbUserLuckdraw.name;
                            this.rewardContent = data.data.result.tbUserLuckdraw.rewardContent;
                            this.startTime = data.data.result.tbUserLuckdraw.endTime;
                            this.joinIntegral = data.data.result.tbUserLuckdraw.joinIntegral;
                        }
                })
            },
            luckDrawreturn(){
                this.$router.go(-1)
            },
            graddraw(){                
                this.$http.post(this.utils.config+"/netmall/app/gamecenter/api/joinLuckDraw?userId="+this.userId+"&luckdrawId="+this.luckdrawId).then((data) => {
                    if(data.data.success){
                        Toast(data.data.message);
                        this.initData();
                    }else{
                        Toast(data.data.message)
                    }
                })
            },
            newInvested(){

            }
            ,drawruler(){
                this.$router.push('/luckruler');
            }

        }
    }
</script>

<style scoped>
    @import "../../assets/font/iconfont.css";
    .colon {
        display: inline-block;
        margin: 0 4px;
        color: #000000;
    }
    .block {
        display: inline-block;
        width: 22px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background-color: #FFD249;
    }

   .luck-box{
       width: 100%;
       min-height: 100%;
       background:rgba(255,46,103,1);
       padding-bottom: 63px;
   }
    .alipay-return {
        width: 100%;
        padding: 12px 14px 0 14px;
        height: 56px;
        text-align: center;
        position: relative;
    }

    .alipay-return span {
        margin-top: 12px;
        height:22px;
        font-size:16px;
        font-family:PingFangSC-Semibold,PingFang SC;
        font-weight:600;
        color:rgba(255,255,255,1);
        line-height:22px;
    }

    .plipayticon {
        font-size: 18px;
        color:rgba(255,255,255,1);
        font-weight: 900;
        position: absolute;
        top: 12px;
        left: 14px;
    }
    .luck-title{
        margin: 20px 38px 0 38px;
        height: calc(100vh - 96px);
        background:rgba(253,255,218,1);
        border-radius:0px 0px 5px 5px;

    }
    .luck-title-title{
        width: 100%;
        height:50px;
        background:rgba(255,232,80,1);
        font-size:16px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:rgba(144,90,0,1);
        text-align: center;
    }
    .luck-title-title img{
        height: 20px;
        width: 100%;
        right: -1px;
    }
    .luck-title-title p{
        height: 45px;
        margin-top: 24px;
        font-size:15px;
        font-family:PingFangSC-Semibold,PingFang SC;
        font-weight:600;
        color:rgba(255,46,103,1);
        line-height:21px;
    }
    .luch-yuan{
        height: 143px;
        width: 200px;
        font-size:80px;
        font-family:DIN-Black,DIN;
        font-weight:900;
        color:rgba(255,46,103,1);
        line-height:98px;
        margin: 0  auto 0 auto;

    }

    .luch-yuan-right {
        margin-top: 10px;
        width: 31px;
        height: 27px;
        background: rgba(255, 46, 103, 1);
        border-radius: 88px 100px 100px 1px;
        font-size: 20px;
        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        line-height: 29px;
    }
    .luch-yuan-text{
        margin-top: 10px;
        font-size:14px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:rgba(255,46,103,1);
        line-height:17px;

    }
    .luch-stick{
        position: absolute;
        top: 280px;
        right: 0px;
        left: 0;
        height: 130px;
        width: 100%;
        background: url("../../assets/img/bg1.png");
        background-size: 100% 100%;
    }
    .luck-stick-btn{
        padding: 10px;
        width:204px;
        height:67px;
        background: url("../../assets/img/button-icon-all@2x.png");
        background-size: 100% 100% ;
        margin:15px auto;
        text-align: center;
    }
    .luck-stick-btn p{
        font-size:18px;
        font-family:AppleSystemUIFont;
        color:rgba(235,35,42,1);
        line-height:21px;
        font-weight: 600;
        line-height: 27px;
    }
    .luck-stick-btn p span{
        font-size:12px;
        font-family:AppleSystemUIFont;
        color:rgba(235,35,42,1);
        font-weight: 600;
    }
    h5{
        font-family:AppleSystemUIFont;
        color:rgba(235,35,42,1);
        line-height:10px;
    }
    .grade-ruler{
        margin-top: 80px;
        height: 60px;
        width: 100%;
        font-size:12px;
        font-family:AppleSystemUIFont;
        color:rgba(255,46,103,1);
        line-height:70px;
        position: relative;
    }
    .grade-ruler:before{
        content: "";
        position:absolute;
        top:34px;
        left: 60px;
        width:37px;
        height:1px;
        background:rgba(255,46,103,1) ;
    }
    .grade-ruler:after{
        content: "";
        position:absolute;
        top:34px;
        right: 60px;
        width:37px;
        height:1px;
        background:rgba(255,46,103,1) ;
    }
    .grade-ruler-content{
        text-align: left;
        padding: 0 15px;
        font-size:13px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(170,118,31,1);
        line-height:20px;
    }
  .luck-stick-left{
      float: left;
      width: 148px;
      height: 67px;
      background: url("../../assets/img/button-icon-left@2x.png");
      background-size: 100% 100% ;
      margin:15px auto;
      text-align: center;
  }
    .luck-stick-right{
      float: right;
        width: 148px;
        height: 67px;
        background: url("../../assets/img/button-icon-right@2x.png");
        background-size: 100% 100% ;
        margin:15px auto;
        text-align: center;
    }
    .luck-stick-left p, .luck-stick-right p{
        margin-top: 12px;
        font-size:14px;
        font-family:AppleSystemUIFont;
        color:rgba(235,35,42,1);
        line-height:20px;
        font-weight: 600;
    }

    h4 {
        font-size:12px;
        font-family:AppleSystemUIFont;
        color:rgba(235,35,42,1);
        line-height:22px;
    }
</style>
